<template>
  <!-- $t is vue-i18n global function to translate lang -->
  <div>
    <div
      v-for="row in articles"
      :key="row.number"
      class="text-xs p-2 odd:bg-white even:bg-gray-100"
    >
      <div>
        <a :href="`/article/${row.number}`">
          <div
            class="text-lg font-bold cursor-pointer inline-block"
            v-html="showHighlight(row.title, searchKey)"
          ></div>
        </a>
      </div>
      <el-tag :key="label.name" v-for="label in row.labels">{{
        label.name
      }}</el-tag>
      <div class="float-right">
        更新于<span>{{ $moment(row.updated_at).fromNow() }}</span>
      </div>
      <div class="py-2">
        <div
          class="overflow-hidden"
          v-html="
            row.body && row.body.length > 0
              ? showHighlight(innerText(row.body), searchKey)
              : 'No Content'
          "
        ></div>
      </div>
    </div>

    <!--工具条-->
    <el-pagination
      layout="total, prev, pager, next"
      background
      :page-size="pageSize"
      @size-change="handleSizeChange"
      :total="total"
      @current-change="handleCurrentChange"
      style="text-align: center; margin-top: 20px"
    >
    </el-pagination>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import showdown from "showdown";
import MdShower from "@/components/MdShower/index.vue";

const converter = new showdown.Converter();

export default {
  name: "List",
  components: {
    MdShower,
  },
  mounted() {
    this.fetchData();
  },
  activated() {
    this.fetchData();
  },
  watch: {
    searchKey() {
      this.fetchData();
    },
  },
  computed: {
    ...mapGetters(["articles", "searchKey", "searchLabel"]),
    total() {
      return this.articles.length;
    },
  },
  data() {
    return {
      dbname: "1",
      list: null,
      listLoading: true,
      downloadLoading: false,
      autoWidth: true,
      page: 1,
      pageSize: 20,
      id: 0,
    };
  },
  methods: {
    fetchData() {
      console.log(this.searchKey, this.searchLabel);
      const val = this.searchKey;
      const store = this.$store;
      if (val.length > 0) {
        let params = {
          q: val,
          sort: "updated_at",
          order: "desc",
          page: 1,
          per_page: 20,
        };
        if (this.searchLabel.length > 0) {
          params.label = this.searchLabel;
        }
        return store.dispatch("queryShowList", params);
      }
      let params = {
        sort: "created",
        direction: "desc",
        page: 1,
        per_page: 20,
      };
      if (this.searchLabel.length > 0) {
        params.labels = this.searchLabel;
      }
      return store.dispatch("fetchShowList", params);
    },
    handleSizeChange(val) {
      console.log(val);
    },
    handleCurrentChange(val) {
      console.log(val);
    },
    innerText(body) {
      const htms = converter.makeHtml(body);
      return this.$$(htms).text();
    },
    showHighlight(text, val) {
      let shrink = text.length > 200;
      if (val.length > 0) {
        let keywordArr = val.split(" ");
        keywordArr.forEach((item) => {
          if (item === "") return;
          let startIdx = text.indexOf(item);
          let lastIdx = text.lastIndexOf(item);
          if (startIdx === -1 || lastIdx === -1) return;
          if (shrink) {
            let prefix = "...";
            if (lastIdx < 200) {
              startIdx = 0;
              prefix = "";
            } else {
              startIdx = Math.min(lastIdx - 200, startIdx);
            }
            text =
              prefix +
              text.substr(
                startIdx,
                Math.max(lastIdx - startIdx + item.length, 200)
              ) +
              "...";
            // console.log(text);
          }
          text = text.replace(
            new RegExp(item, "g"),
            '<font color="#f75353">' + item + "</font>"
          );
        });
        // console.log(text);
      } else {
        if (text.length > 200) text = text.substr(0, 200) + "...";
      }
      return text;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-select >>> .el-input {
  width: 130px;
}
.radio-label {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 30px;
}
</style>